<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
            color: #fff;
        }
        /* banner外框 */
        
        .banner {
            position: relative;
            margin: 100px auto;
            width: 564px;
            height: 315px;
            overflow: hidden;
            border-radius: 12px;
        }
        /* 图片区域 */
        
        .banner ul {
            display: flex;
            transition: transform 1s ease-in-out;
        }
        
        .banner img {
            width: 564px;
            height: 315px;
            vertical-align: middle;
        }
        
        .prev,
        .next,
        .banner ol {
            position: absolute;
            z-index: 2;
        }
        /* 鼠标滑到banner区域，箭头要显示 display:block */
        
        .banner:hover .prev,
        .banner:hover .next {
            display: block;
        }
        
        .banner .prev,
        .banner .next {
            display: none;
            width: 20px;
            height: 30px;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, .3);
            line-height: 30px;
        }
        
        .banner .prev {
            left: 0;
            border-radius: 0 15px 15px 0;
        }
        
        .banner .next {
            right: 0;
            text-align: right;
            border-radius: 15px 0 0 15px;
        }
        
        .banner ol {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 42px;
            height: 13px;
            background-color: rgba(255, 255, 255, 0.3);
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 6.5px;
        }
        
        .banner ol li {
            width: 8px;
            height: 8px;
            background-color: #fff;
            transition: background-color .5s ease-in-out;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .banner ol .active {
            background-color: #ff5000;
        }
        
        .nextAds {
            transform: translateX(-100%);
        }
        
        .prevAds {
            transform: translateX(-50%);
        }
    </style>
</head>

<body>
    <div class="banner">
        <ul id="imgList">
            <li>
                <a href="#"><img src="./images/banner1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/banner2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/banner3.jpg" alt=""></a>
            </li>
        </ul>
        <!-- 上一页 -->
        <a href="#" onclick="prevAds()" class="prev"><i class="iconfont icon-zuoce"></i></a>
        <!-- 下一页 -->
        <a href="#" onclick="nextAds()" class="next"><i class="iconfont icon-youce"></i></a>
        <!-- 圆点 -->
        <ol>
            <!-- <li onclick="goToAds(0)" class="active"></li>
            <li onclick="goToAds(1)"></li>
            <li onclick="goToAds(2)"></li> -->
            <li class="active"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script>
        let current = 0
        let ele = document.getElementById("imgList")
            // 在页面中先查找ol
        let ele_ol = document.getElementsByTagName("ol")[0]
            // 再在ol中查找li
        let pointer = ele_ol.getElementsByTagName("li")
            // 为li注册点击事件
        for (let i = 0; i < pointer.length; i++) {
            pointer[i].addEventListener('click', function() {
                goToAds(i)
            })
        }
        // 当点击上一页时处理函数
        function prevAds() {
            if (!current) {
                ele.style.cssText += `transform: translateX(-200%);`
                current = 2
                setActivePointer(current)
                return
            } else {
                current -= 1;
                ele.style.cssText += `transform: translateX(-${100*current}%);`
                setActivePointer(current)
                return
            }
        }
        // 当点击下一页时处理函数
        function nextAds() {
            if (current === 2) {
                ele.style.cssText += `transform: translateX(0%);`
                current = 0
                setActivePointer(current)
                return
            } else {
                current += 1;
                ele.style.cssText += `transform: translateX(-${100*current}%);`
                setActivePointer(current)
                return
            }
        }
        // 设置当前圆点指向的样式
        function setActivePointer(n) {
            for (let i = 0; i < pointer.length; i++) {
                if (i === n) {
                    pointer[i].classList.add("active")
                } else {
                    pointer[i].classList.remove("active")
                }
            }
        }
        // 点击小圆点时指定跳转函数
        function goToAds(n) {
            current = n;
            ele.style.cssText += `transform: translateX(-${100*current}%);`
            setActivePointer(current)
            return
        }
        // 实现自动滚动播放效果
        window.addEventListener("load", function() {
            let timer = setInterval(() => {
                nextAds()
            }, 5000);
        })
    </script>
</body>

</html>